<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>监视属性_天气案例02</title>
	<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

	<!-- 
		深度监视:
			(1).Vue中的watch默认不监测对象内部值的改变(一层)
			(2).配置deep:true可以监测对象内部值改变(多层)。
		备注:
			(1).Vue自身可以监测对象内部值的改变,但Vue提供的watch默认不可以!
			(2).使用watch时根据数据的具体结构，决定是否采用深度监视。
	-->
	<div id="root">
		<h1>{{list.a}}</h1>
	</div>
</body>
<script type="text/javascript">
	Vue.config.productionTip = true
	//创建Vue实例
	const vm = new Vue({
		el:'#root',      
		data:{
			isHot:true,
			list:{
				a:1,
				b:2,
				c:3
			}
		}, //data中的数据可以通过函数来获取
		watch:{
			//这个是原生的写法 监视单个
			// 'list.a':{
			// 	handler(newvalue,oldvalue){
			// 		console.log("@@@",newvalue,oldvalue);
			// 	}
			// },
			// 如果是list 或者 是 list.a 是监视不到的
			// list:{
			// 	handler(newvalue,oldvalue){
			// 		console.log("@@@",newvalue,oldvalue);
			// 	}
			// },
			list:{
				deep:true,//深度监视
				handler(newvalue,oldvalue){
					console.log("@@@",newvalue,oldvalue);
				}
			}
			
		},
		// 无论是计算属性还是data属性 都可以被监视 
		// isHot:{
		// 	factTemperture:{
		// 		handler(oldvalue,newvalue){
		// 			console.log("@@@",oldvalue,newvalue);
		// 		}
		// 	}
		// }
	})

	// vm.$watch('factTemperture',{
	// 	immediate:true, //初始化加载一下监视函数
	// 	handler(oldvalue,newvalue){
	// 		console.log("@@@",oldvalue,newvalue);
	// 	}
	// })
</script>
</html>